<template>
   <div class="my-setting">
    
     <header >
        <Myphone></Myphone>
       <p>我的</p>
       <ul class="nav-t">
         <li><div class="avatar-out"><img :src="userList.u_img" alt=""></div><i class="yo-ico">&#xe6f0;</i></li>
         <li><span>{{userList.u_name}}</span><b>关注&nbsp;{{userList.u_guanzhu}}</b><b>粉丝&nbsp;{{userList.u_fans}}</b></li>
         <li @click="clickActive('HomePage')" :list="userList"><span>个人主页 </span><i class="yo-ico">&#xe502;</i></li>
       </ul>
      <ul class="nav-bot">
        <li>
            <span>{{active_num}}</span>
            <i>动态</i>
        </li>
        <li>
            <span>269</span>
            <i>文章</i>
        </li>
        <li>
            <span>143</span>
            <i>收藏</i>
        </li>
        <li>
            <span>2k</span>
            <i class="last-i">预览</i> 
        </li>
      </ul>
     </header>
     <footer>
       <div class="footer-d">
         <ul class="footer-d-ul">
           <li @click="clickActive('Post')"><i class="yo-ico">&#xe610;</i><span>我要投搞</span><i class="yo-ico yo-right">&#xe502;</i></li>
           <li @click="clickActive('Wallet')"><i class="yo-ico">&#xe63f;</i><span>我的钱包</span><i class="yo-ico yo-right">&#xe502;</i></li>
           <li @click="clickActive('Myset')"><i class="yo-ico">&#xe618;</i><span>设置</span><i class="yo-ico yo-right">&#xe502;</i></li>
           <li @click="clickActive('Advice')"><i class="yo-ico">&#xe60e;</i><span>反馈意见</span><i class="yo-ico yo-right">&#xe502;</i></li>
         </ul>
       </div>
        
       </footer>
       
   </div>
</template>
<script>
import Myphone from '@/components/myphone'
import axios from "axios"
export default {
    components: {
     Myphone
    },
    data() {
      return{
        userList:[],
        active_num:null,
      }
    },
    created(){
      this.onLoad();
    },
    methods:{
      clickActive(value){
        this.$router.push({
          path:`/Index/MySettings/${value}`
          // params:{
          //   HomePage_list:this.userList
          // }
        })
         this.bus.$emit("change","aaaa");
      },
      async onLoad(){
        let user=this.$store.state.u_id
        let result=await this.$http.get(`http://localhost:3001/user?u_id=${user}`);
        this.userList=result.data[0];
       
        this.active_num=this.userList.u_acive.length;
      }
    }
}
</script>
<style lang="stylus" scoped>
  .my-setting
    width 100%
    height 100%
    display flex
    flex-direction column
    header
      display flex
      flex-direction column
      background-color #3d7eff
      padding-bottom .12rem
      p
        font-size .26rem
        color #fff
        padding-left .2rem
        padding-top .12rem
        font-weight  600
      .nav-t
        height 1rem
        display flex
        color #ffffff
        li:first-child
          flex 104
          padding .12rem 0 0 .22rem
          position relative
          .avatar-out
            width .68rem
            height .68rem
            border 2px solid #ffffff
            border-radius 50%
            background-color #fff
            overflow hidden
            img 
              width 100%
              height 100%
          i 
            color #f1a1c1
            position absolute
            z-index 999
            font-size .28rem
            left 54%
            top 44%
        li:nth-child(2)
          flex 173
          span
            display block
            line-height 0.44rem
            padding-top .10rem
            font-weight 600
          b 
            font-size 13px
            font-weight 400
            padding-right .16rem
        li:last-child
          flex 98
          span
            font-size .14rem 
            display inline-block
            height 1rem
            line-height 1rem
            text-align center
      .nav-bot
        display flex
        justify-content space-between
        li
          flex 1
          color #ffffff  
          text-align center
          span 
            display block
            font-size .2rem
          i 
            display inline-block
            font-size .14rem
            
    footer
      background-color #3d7eff
      margin-top -1px
      .footer-d
        background-color #ffffff
        padding .15rem .16rem 0rem .22rem
        border-radius 26px 26px 0 0
        ul
          font-size .16rem
          font-weight 600
          color #333
          li
            display flex
            justify-content  space-between
            height .65rem
            line-height .40rem
            text-align center
            span 
              width 2.94rem
              text-align left
            i
              text-align center
              padding-right 0.16rem
              padding-top .01rem
</style> 

